<template>
  <div>
    <div class="time-bar">
      <div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            font-size: 12px;
          "
        >
          <div>8:00</div>
          <!-- <div>8:30</div>
          <div>9:00</div>
          <div>9:30</div>
          <div>10:00</div>
          <div>10:30</div>
          <div>11:00</div>
          <div>11:30</div>
          <div>12:00</div>
          <div>12:30</div>
          <div>13:00</div>
          <div>13:30</div>
          <div>14:00</div>
          <div>14:30</div>
          <div>15:00</div>
          <div>15:30</div>
          <div>16:00</div>
          <div>16:30</div>
          <div>17:00</div>
          <div>17:30</div>
          <div>18:00</div>
          <div>18:30</div> -->
          <div>19:00</div>
        </div>
      </div>
      <div>
        <div
          v-for="slot in timeSlots"
          :key="slot.time"
          :style="{ width: slot.width + '%', background: slot.color }"
          class="time-slot"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const timeSlots = ref([]);

// 模拟已经被预约的时间段
const reservedSlots = [
  { start: 8, end: 10 },
  { start: 18, end: 19 },
];

// 生成时间段数据
for (let i = 8; i <= 19; i += 0.5) {
  const width = 100 / (19 - 8) / 2;
  const color = isReserved(i) ? "red" : "green";
  timeSlots.value.push({ time: i, width, color });
}

// 判断时间段是否已被预约
function isReserved(time) {
  for (const slot of reservedSlots) {
    if (time >= slot.start && time < slot.end) {
      return true;
    }
  }
  return false;
}
</script>

<style lang="scss" scoped>
.time-bar {
  /* display: flex;
  height: 3px; */
  > div:nth-child(2) {
    display: flex;
    height: 3px;
  }
}

.time-slot {
  height: 100%;
  border-right: 1px solid white;
}
</style>
